<template>
  <div class="home">
    <Carousel />

    <div class="list banxin">
      <div class="tanxin">
        <div class="list_l">
          <Tuijianlan :remen="remen" />
          <MuisList />
          <Tuijianlan :remen="gexin" />

          <Tuijianlan :remen="xindie" />
          <Newmuse />
        </div>
        <div class="list_r_login">
          <div class="list_r_d" v-if="$store.state.isGoLogin">
            <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
            <div>用户登录</div>
          </div>
          <div class="list_r_urse" v-else>
            <div class="list_top tanxin">
              <div class="list_top_l">
                <img :src="$store.state.avatarUrl" alt="" />
              </div>
              <div class="list_top_r">
                <h2>
                  喜
                  <img src="../assets/images/cvip.png" alt="" />
                </h2>
                <span>LV.8</span>
                <div class="qdbtn">签到</div>
              </div>
            </div>
            <div class="list_botton">
              <ul class="tanxin">
                <li>
                  <span>0</span>
                  <p>动态</p>
                </li>
                <li>
                  <span>0</span>
                  <p>关注</p>
                </li>
                <li>
                  <span>0</span>
                  <p>粉丝</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="geshou">
            <Geshou />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Carousel from "@/components/Carousel.vue";
import MuisList from "@/components/MuisList.vue";
import Tuijianlan from "@/components/Tuijianlan.vue";
import Geshou from "@/components/Geshou.vue";

import Newmuse from "@/components/Newmuse.vue";

export default {
  data() {
    return {
      remen: ["热门推荐", "话语", "流行", "摇滚", "民谣", "电子"],
      gexin: ["个性推荐"],
      xindie: ["新碟上架"],
    };
  },
  components: {
    Carousel,
    MuisList,
    Tuijianlan,
    Geshou,
    Newmuse,
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.home {
  background-color: #ccc;
  .list {
    background-color: #fff;
    .list_r_login {
      margin-right: 20px;
      height: 140px;
      background-color: #e9e9e9;
      .list_r_d {
        div {
          width: 100px;
          height: 30px;
          border-radius: 5px;
          background-color: @red;
          color: #fff;
          margin: 0 auto;
          text-align: center;
          line-height: 30px;
        }

        p {
          font-size: 16px;
          padding: 20px;
        }
      }
      .geshou {
        margin-top: 60px;
      }
      .list_r_urse {
        margin-right: 20px;
        width: 310px;
        height: 200px;
        background-color: rgb(243, 243, 243);
        .list_top {
          justify-content: flex-start;
          .list_top_l {
            width: 80px;
            height: 80px;
            padding: 2px;
            border: 1px solid #ccc;
            margin-top: 20px;
            margin-left: 20px;
            img {
              width: 80px;
              height: 80px;
            }
          }
          .list_top_r {
            margin-top: 20px;
            margin-left: 20px;
            h2 {
              text-overflow: ellipsis;
              font-size: 14px;
              cursor: pointer;
              line-height: 16px;
              img {
                width: 43px;
                height: 16px;

                background-size: auto 15px;
                background-repeat: no-repeat;
                background-position: center;
              }
            }
            span {
              display: block;
              width: 30px;
              height: 17px;
              padding-left: 5px;
              padding-right: 5px;
              font-size: 10px;
              border-radius: 10px;
              border: 1px solid @red;
              color: @red;
              margin-top: 7px;
              text-align: center;
              line-height: 17px;
            }
            .qdbtn {
              width: 120px;
              margin-top: 15px;
              height: 31px;
              border-radius: 5px;
              line-height: 31px;
              text-align: center;
              cursor: pointer;
              background-color: rgb(41, 162, 209);
              font-size: 13px;
            }
          }
        }
        .list_botton {
          ul {
            margin: 20px;
            li {
              width: 65px;
              text-align: center;
              border-right: 1px solid #ccc;
              color: #333;
              &:last-of-type {
                border: none;
              }
            }
          }
        }
      }
    }
  }
}
</style>